let canvas = document.createElement('canvas');
document.body.append(canvas) ;
//canvas初始化
canvas.width = 400 ;
canvas.height = 400 ;

let ctx = canvas.getContext('2d');

//移动原点
ctx.translate(200,200);

//绘制圆盘
ctx.save();
ctx.beginPath();
ctx.arc(0,0,200,0,Math.PI*2) ;
ctx.stroke();
ctx.restore();

//绘制大刻度
ctx.save()
ctx.strokeStyle = '#ccc' ;
ctx.lineWidth = 8 ;
for(let i=0;i<12;i++){
    ctx.beginPath();
    ctx.moveTo(0,-200);
    ctx.lineTo(0,-180);
    ctx.stroke();
    ctx.rotate(Math.PI * 2 / 12)
}
ctx.restore();

//绘制小刻度
ctx.save();
ctx.strokeStyle = '#ddd' ;
ctx.lineWidth = 4 ;
for(let i = 0 ;i<60;i++){
    if(i%5 != 0){
        ctx.beginPath();
        ctx.moveTo(0,-200);
        ctx.lineTo(0,-190) ;
        ctx.stroke();
    }
    ctx.rotate(Math.PI * 2 / 60) ;
}
ctx.restore();

//绘制大刻度数字
ctx.save();
ctx.font = '20px sans-serif' ;
ctx.textAlign = 'center' ;
ctx.textBaseline = 'middle' ;
const r = 160 ;
const hd = Math.PI * 2 / 12 ;
for(let i = 0 ;i<12;i++){
    const text = i==0?12:i ;
    const x = Math.sin(hd*i) * r ;
    const y = -Math.cos(hd*i) * r ;
    ctx.fillText(text,x , y) ;
}
ctx.restore();

//-------------------------------------------------------------------
canvas = document.createElement('canvas');
document.body.append(canvas) ;
//canvas初始化
canvas.width = 400 ;
canvas.height = 400 ;

ctx = canvas.getContext('2d');

ctx.translate(200,200);

(function draw(){
    ctx.clearRect(-200,-200,canvas.width,canvas.height);
    //获得当前时间的时分秒，分别计算表针旋转角度
    const now = new Date();
    const hour = now.getHours()%12;
    const minute = now.getMinutes() ;
    const second = now.getSeconds() ;

    //绘制时针
    ctx.save();
    ctx.rotate( (hour * 3600 + minute * 60 + second) * Math.PI * 2 / (60 * 60 * 12))
    ctx.beginPath();
    ctx.moveTo(-5,10);
    ctx.lineTo(-5,-100);
    ctx.quadraticCurveTo(-15,-100,0,-120);
    ctx.quadraticCurveTo(15,-100,5,-100);
    ctx.lineTo(5,10);
    ctx.closePath();
    ctx.fill();
    ctx.restore();

    //绘制分针
    ctx.save();
    ctx.rotate( (minute*60 + second) * Math.PI * 2 / 3600 )
    ctx.lineWidth = 6
    ctx.strokeStyle = '#ccc' ;
    ctx.beginPath();
    ctx.moveTo(0,20);
    ctx.lineTo(0,-160);
    ctx.stroke();
    ctx.restore();


    //绘制秒针
    ctx.save();
    ctx.rotate( Math.PI * 2 / 60 * second );
    ctx.lineWidth = 2
    ctx.strokeStyle = '#f00' ;
    ctx.beginPath();
    ctx.moveTo(0,30);
    ctx.lineTo(0,-190);
    ctx.stroke();
    ctx.restore();


    //绘制圆心点
    ctx.save();
    ctx.beginPath();
    ctx.arc(0,0,6,0,Math.PI*2);
    ctx.fill();
    ctx.restore();

    setTimeout(draw, 1000);
})();